<template>
    <a-form-model
      ref="ruleForm"
      :model="form"
      :rules="rules"
      :label-col="labelCol"
      :wrapper-col="wrapperCol"
    >
      <a-form-model-item ref="name" label="姓名" prop="name">
        <a-input
          v-model="form.name"
          @blur="
            () => {
              $refs.name.onFieldBlur();
            }
          "
        />
      </a-form-model-item>
      <a-form-model-item label="性别" prop="sex">
        <a-select v-model="form.sex" placeholder="请选择性别">
          <a-select-option value="man">
            男
          </a-select-option>
          <a-select-option value="woman">
            女
          </a-select-option>
        </a-select>
      </a-form-model-item>
      <a-form-model-item label="时间" required prop="date1">
        <a-date-picker
          v-model="form.date1"
          show-time
          type="date"
          placeholder="选择一个时间"
          style="width: 100%;"
        />
      </a-form-model-item>
      <a-form-model-item label="即时交货" prop="delivery">
        <a-switch v-model="form.delivery" />
      </a-form-model-item>
      <a-form-model-item label="活动类型" prop="type">
        <a-checkbox-group v-model="form.type">
          <a-checkbox value="1" name="type">
            线上
          </a-checkbox>
          <a-checkbox value="3" name="type">
            线下
          </a-checkbox>
        </a-checkbox-group>
      </a-form-model-item>
      <a-form-model-item label="备注" prop="desc">
        <a-input v-model="form.desc" type="textarea" />
      </a-form-model-item>
      <a-form-model-item :wrapper-col="{ span: 14, offset: 4 }">
        <a-button type="primary" @click="onSubmit">
          创建
        </a-button>
        <a-button style="margin-left: 10px;" @click="resetForm">
          重置
        </a-button>
      </a-form-model-item>
    </a-form-model>
  </template>
  <script>
  export default {
    data() {
      return {
        labelCol: { span: 4 },
        wrapperCol: { span: 14 },
        other: '',
        form: {
          name: '',
          sex: undefined,
          date1: undefined,
          delivery: false,
          type: [],
          resource: '',
          desc: '',
        },
        rules: {
          name: [
            { required: true, message: '请输入姓名', trigger: 'blur' },
            { min: 2, max: 10, message: '长度应该在2~10之间', trigger: 'blur' },
          ],
          sex: [{ required: true, message: '请选择性别', trigger: 'change' }],
          date1: [{ required: true, message: '请选择一个日期', trigger: 'change' }],
          type: [
            {
              type: 'array',
              required: true,
              message: '请选择活动方式',
              trigger: 'change',
            },
          ],
          desc: [{ required: true, message: '请输入备注信息', trigger: 'blur' }],
        },
      };
    },
    methods: {
      onSubmit() {
        this.$refs.ruleForm.validate(valid => {
          if (valid) {
            alert('submit!');
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      },
      resetForm() {
        this.$refs.ruleForm.resetFields();
      },
    },
  };
  </script>
  